<template>
  <div class="add-book-container">
    <h1 v-if="isAddMode">增加书籍</h1>
    <h1 v-else>补充书籍</h1>

    <form @submit.prevent="submitForm">
      <div class="form-group">
        <label for="title">书名</label>
        <input
          type="text"
          id="title"
          v-model="newBook.title"
          required
        />
      </div>
      <div class="form-group">
        <label for="author">作者</label>
        <input
          type="text"
          id="author"
          v-model="newBook.author"
          required
        />
      </div>
      <div class="form-group">
        <label for="isbn">唯一标识符</label>
        <input
          type="text"
          id="isbn"
          v-model="newBook.isbn"
          required
        />
      </div>
      <div class="form-group">
        <label for="quantity">数量</label>
        <input
          type="number"
          id="quantity"
          v-model.number="newBook.quantity"
          min="1"
          required
        />
      </div>

      <button type="submit">{{ isAddMode ? '添加书籍' : '补充书籍' }}</button>
    </form>

    <div class="mode-toggle">
      <button @click="toggleMode" class="toggle-button">
        切换到{{ isAddMode ? '补充' : '添加' }}功能
      </button>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
// import { MessageBox } from 'element-ui';

export default {
  name: 'AddOr SupplementBook',
  data() {
    return {
      isAddMode: true, // 默认为添加模式
      newBook: {
        title: '',
        author: '',
        isbn: '',
        quantity: 1,
      },
      adminId: null,
    };
  },
  created() {
    // 在组件创建时从本地存储中获取用户信息
    this.loadAdminId();
  },
  methods: {

    loadAdminId() {
      const user = JSON.parse(localStorage.getItem('user') || '{}');
      this.adminId = user.Id || null; // 确保存在Id字段
      if (!this.adminId) {
        console.error('管理员ID不存在');
        this.$alert('管理员ID不存在，请重新登录');
      }
    },

    toggleMode() {
      this.isAddMode = !this.isAddMode;
    },
    async submitForm() {
      try {
        const url = this.isAddMode
          ? 'http://8.134.212.44:9999/admin/addbook'
          : 'http://8.134.212.44:9999/admin/logadd';


        // const payload = {
        //   title: this.newBook.title,
        //   author: this.newBook.author,
        //   isbn: this.newBook.isbn,
        //   total_quantity: this.newBook.quantity,
        //   admin_id: this.adminId // 使用从本地存储中获取的adminId
        // };

        let payload;
        if (this.isAddMode) {
          // 添加书籍模式
          payload = {
            title: this.newBook.title,
            author: this.newBook.author,
            isbn: this.newBook.isbn,
            total_quantity: this.newBook.quantity,
            admin_id: this.adminId
          };
        } else {
          // 补充书籍模式
          payload = {
            isbn: this.newBook.isbn,
            change_amount: this.newBook.quantity,
            change_type: "入库", // 固定值
            // admin_id: this.adminId
          };
        }


        await axios.post(url, payload, {
          headers: {
            'Content-Type': 'application/json'
          }
        });

        alert(this.isAddMode ? '书籍添加成功' : '书籍补充成功');
        this.newBook = {
          title: '',
          author: '',
          isbn: '',
          quantity: 1
        };
      } catch (error) {
        console.error('操作失败:', error);
        alert('操作失败，请稍后重试');
      }
    }
  }
};
</script>

<style scoped>
.add-book-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  text-align: center;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
}

.form-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  padding: 10px 20px;
  background: #42b983;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 10px;
}

button:hover {
  background: #3498db;
}

.mode-toggle {
  margin-top: 20px;
  text-align: center;
}

.toggle-button {
  background-color: #f1c40f;
}
</style>